import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.LocalStorage 2.0
import "qrc:/DataBase.js" as DB

Item {
    id: root
    signal clicked

    // 排行榜
    Rectangle {
        anchors.fill: parent
        color:"transparent"
        Image {
            id: top_image
            anchors.centerIn:  parent
            width: parent.width/2
            height: parent.height/2
            source: "qrc:/img/topUI/top.png"
        }

        Component.onCompleted: {
            DB.initDatabase()
            DB.readData()
        }

        ListModel {
            id: topModel
        }


        TableView {
            id: topTable
            anchors.fill: parent
            alternatingRowColors: false

            TableViewColumn {
                role: "number"
                title: "排名"
                width: topTable.viewport.width/topTable.columnCount
            }

            TableViewColumn {
                role: "score"
                title: "分数"
                width: topTable.viewport.width/topTable.columnCount
            }
            model: topModel

            //自定义表头代理
            headerDelegate:
                Rectangle{
                //color: "#00498C"
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "green" }
                    GradientStop { position: 1.0; color: "green" }
                }
                width: 100;
                height: 40
                border.color: "black"
                Text
                {
                    anchors.centerIn : parent
                    text: styleData.value
                    font.pixelSize: parent.height*0.5
                }
            }

            //行代理可以修改行高等信息
            rowDelegate: Rectangle {
                height: 50
                color: "#052641"
                anchors.leftMargin: 2

            }
            itemDelegate: Rectangle{
                border.width: 1
                color : "#82FA58"
                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.leftMargin: 5
                    color : "black"
                    text: styleData.value
                    anchors.centerIn: parent
                    font.pixelSize: parent.height*0.4
                }
            }


        }

        MouseArea {
            id: area
            anchors.fill: parent
            onClicked: root.clicked()
        }
    }
}
